<!-- 会议活动管理 -->
<template>
    <div class="curriculum-resources-container">
        <header>
            <el-form ref="searchForm" :model="searchForm" inline>
                <el-form-item label="类型" prop="roomCategory">
                    <el-select v-model="searchForm.roomCategory" placeholder="请选择">
                        <el-option
                                v-for="item in DictTypeList"
                                :key="item.id"
                                :label="item.dictName"
                                :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="所属门店" prop="shopId">
                    <el-select v-model="searchForm.shopId" placeholder="请选择">
                        <el-option
                                v-for="item in storeList"
                                :key="item.id"
                                :label="item.companyName"
                                :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="SearchReset('searchForm')">重置</el-button>
                    <el-button type="primary" @click="SearchSubmit">查询</el-button>
                    <el-button type="primary" @click="CreateForm">新增</el-button>
                </el-form-item>
            </el-form>
        </header>
        <article class="flex">
            <Table
                    :table-data="pageInfo.list"
                    :table-column-options="pageInfo.columns"
                    :table-data-total="pageInfo.list.length"
                    :hasIndex="true"
                    :page="1"
                    :size="10"
                    @tableUpdate="CurrentChange"
            >
                <template #worktime="{ data }">
                    {{data.dayStartTime}} - {{data.dayEndTime}}
                </template>
                <template #handelation="{ data }">
                    <el-switch
                            v-model="data.status"
                            @change="handleOnline(data)"
                            active-value="1"
                            inactive-value="0"
                            active-text="上线"
                            inactive-text="下线">
                    </el-switch>
                </template>
                <template #picgroup="{ data }">
                    <el-button type="text" @click="showPicModel(data)">图集</el-button>
                </template>
                <template #operation="{ data }">
                    <el-button type="text" @click="TableEdit(data)">编辑</el-button>
                    <el-button type="text" @click="TableDel(data)">删除</el-button>
                </template>
            </Table>
        </article>

        <el-dialog
                title="会议活动空间"
                :visible.sync="pageInfo.show"
                width="50%"
                :before-close="() => Cancel()"
        >
            <el-form ref="formDatas" :model="pageInfo.formData" label-width="140px" label-position="right">
                <el-form-item label="空间名称" prop="roomName">
                    <el-input v-model="pageInfo.formData.roomName" clearable placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="容纳人数" prop="capNum">
                    <el-input v-model="pageInfo.formData.capNum" clearable placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="面积(㎡)" prop="area">
                    <el-input v-model="pageInfo.formData.area" type="number" clearable placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="分类" prop="capNum">
                    <el-select v-model="pageInfo.formData.roomCategory" placeholder="请选择">
                        <el-option
                                v-for="item in DictTypeList"
                                :key="item.id"
                                :label="item.dictName"
                                :value="item.id"
                        />
                    </el-select>
                </el-form-item>

                <el-form-item label="配置" prop="configTag">
                    <el-checkbox-group v-model="pageInfo.formData.configTag">
                        <el-checkbox :label="item.id" v-for="item in DictList" :key="item.id">{{item.dictName}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <!--        <el-form-item label="联系电话" prop="phoneNum">-->
                <!--          <el-input v-model="pageInfo.formData.phoneNum" maxlength="11" clearable readonly placeholder="请输入" />-->
                <!--        </el-form-item>-->
                <el-form-item label="经纬度坐标">
                    <el-row :gutter="24">
                        <el-col :span="6">
                            <el-form-item prop="zbJd">
                                <el-input v-model="pageInfo.formData.zbJd" clearable placeholder="经度"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="zbWd">
                                <el-input v-model="pageInfo.formData.zbWd" clearable placeholder="纬度"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form-item>
                <!-- <el-form-item label="营业结束时间" >
                  <el-date-picker v-model="pageInfo.formData.endDate" type="datetimerange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
                </el-form-item> -->
                <el-form-item label="所属门店" prop="shopId" >
                    <el-select v-model="pageInfo.formData.shopId" @change="changeStore">
                        <el-option v-for="(item, index) in storeList" :key="index" :label="item.companyName"
                                   :value="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="每日营业时间">
                    <el-col :span="6">
                        <el-form-item prop="dayStartTime">
                            <el-time-select
                                    :disabled="!pageInfo.formData.shopId"
                                    placeholder="开始时间"
                                    :picker-options="{
                                        start: storeInfo.startTime,
                                        step: '01:00',
                                        end: storeInfo.endTime
                                    }"
                                    v-model="pageInfo.formData.dayStartTime"
                            >
                            </el-time-select>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1">-</el-col>
                    <el-col :span="6">
                        <el-form-item prop="dayEndTime">
                            <el-time-select
                                    placeholder="结束时间"
                                    :disabled="!pageInfo.formData.shopId"
                                    v-model="pageInfo.formData.dayEndTime"
                                    :picker-options="{
                                        start: storeInfo.startTime || '01:00',
                                        step: '01:00',
                                        end: storeInfo.endTime || '23:00'
                                    }"
                            >
                            </el-time-select>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                
                <el-form-item label="每小时单价" prop="price">
                    <el-input v-model="pageInfo.formData.price" type="number" placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                    <el-input v-model="pageInfo.formData.address" placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="缩略图" prop="thumbUrl">
                    <y-upload-img
                            :url="pageInfo.formData.thumbUrl"
                            @update="updateModel"
                            valueType="String"
                            redraw-on-server
                            :cropper-options="{
              fixedNumber: [1, 1],
              centerBox: false
            }"
                            :limit="1"
                            re-upload
                            business-sys-module-code="GOODS_MEDIA">
                    </y-upload-img>

                </el-form-item>
                <!-- <el-form-item label="图集展示">
                  <el-upload
                    action="https://native.imflea.com:8000/zero-file-service/flea/file/upload"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                  >
                    <i class="el-icon-plus" />
                  </el-upload>
                </el-form-item> -->
                <el-form-item label="简介" prop="descript">
                    <el-input v-model="pageInfo.formData.descript" type="textarea" clearable placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="" style="text-align: right;">
                    <el-button @click="Cancel">取消</el-button>
                    <el-button type="primary" @click="Submit">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog
                title="图集"
                :visible.sync="picgroupInfo.show"
                width="50%"
                :before-close="() => closePicModel()"
        >

            <el-form ref="formDatas" :model="pageInfo.formData" label-width="140px" label-position="right">
                <!-- <el-form-item label="图集" prop="thumbUrl">
                  <img :src="item.imgUrl" style="width:200px; max-height:200px;" v-for="item in picgroupInfo.picList" :key="item.id" alt="">
                </el-form-item> -->
                <el-form-item label="上传新图" prop="thumbUrl">
                    <y-upload-img
                            :url="picgroupInfo.picList"
                            @update="updateModelAlbum"
                            :cropper-options="{
                  fixedNumber: [4, 4],
                  centerBox: false
                }"
                            :limit="6"
                            :re-upload="false"
                            business-sys-module-code="GOODS_MEDIA">
                    </y-upload-img>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    import Table from '@/components/Table/index'
    import meetApi from '../../api/meet.js'

    export default {
        name: 'CurriculumResources',
        components: {
            Table
        },
        data() {
            return {
                storeInfo: {},
                DictList: [],
                DictTypeList: [],
                searchLoading: false,
                DICTDialog: false,
                picgroupInfo: {
                    show: false,
                    picList: [],
                    formData: {
                        bizId: "",
                        delFlag: "",
                        iconFlag: null,
                        id: "",
                        imgUrl: "",
                        videoAttachmentId: "",
                        videoName: "",
                        videoUrl: ""
                    }
                },
                searchForm: {
                    roomCategory: '',
                    // shopId: '',
                    roomType: 1,
                    pageNum: 1,
                    pageSize: 10
                },
                meetArray: [
                    {id: 2, name: '会议室'},
                    {id: 1, name: '路演厅'},
                    {id: 3, name: '展厅'}
                ],
                storeList: [],
                sizeOptions: [
                    {
                        id: 1,
                        name: '1-5人'
                    },
                    {
                        id: 2,
                        name: '6-10人'
                    },
                    {
                        id: 3,
                        name: '11-20人'
                    },
                    {
                        id: 4,
                        name: '21-40人'
                    }
                ],
                optionsList: [],
                pageInfo: {
                    show: false,
                    formData: {
                        address: "",
                        capNum: null,
                        configTag: [],
                        dayEndTime: "",
                        dayStartTime: "",
                        delFlag: "",
                        descript: "",
                        endDate: "",
                        phoneNum: "13161967869",
                        price: "",
                        roomCategory: "",
                        roomName: "",
                        roomType: 1,
                        shopId: "",
                        startDate: "",
                        thumbUrl: "",
                        zbJd: "",
                        zbWd: ""
                    },
                    columns: [
                        // {
                        //   label: '编号',
                        //   prop: 'no',
                        //   width: 100
                        // },
                        {
                            label: '空间名称',
                            prop: 'roomName',
                            width: 200
                        },
                        {
                            label: '所属门店',
                            prop: 'shopName',
                            width: 150
                        },
                        {
                            label: '电话',
                            prop: 'phoneNum'
                        },
                        {
                            label: '价格',
                            prop: 'price'
                        },
                        {
                            label: '详细地址',
                            prop: 'address'
                        },
                        // {
                        //   label: '所属门店',
                        //   prop: 'shopId'
                        // },
                        {
                            label: '营业时间',
                            columnType: true,
                            slotName: 'worktime',
                        },
                        {
                            label: '空间图集',
                            columnType: true,
                            slotName: 'picgroup',
                        },
                        {
                            label: '上下线操作',
                            columnType: true,
                            slotName: 'handelation',
                            width: 200
                        },
                        {
                            label: '操作',
                            columnType: true,
                            slotName: 'operation',
                            width: 200
                        }
                    ],
                    list: [],
                    data: {},
                    
                },
                thisBizId: ''
            }
        },
        async mounted() {
            this.queryStoreList()
            this.queryDictList()
            this.queryDictTypeList()
            this.TableList()
        },
        methods: {
            changeStore(){
                console.log(this.pageInfo.formData.shopId,22221111)
                let params = {
                    id: this.pageInfo.formData.shopId
                }
                this.$yAxios({
                    url: meetApi.queryStoreById,
                    data: params,
                    loading: true
                    }, info => {
                    console.log(info,2222)
                    this.storeInfo = info
                })
            },
            handleOnline(row) {
                let params = {
                    id: row.id
                }
                if (row.status == 1) {
                    this.$yAxios({
                        url: meetApi.update2Up,
                        data: params,
                        loading: true
                    }, info => {
                        this.TableList()
                    })
                } else {
                    this.$yAxios({
                        url: meetApi.update2Down,
                        data: params,
                        loading: true
                    }, info => {
                        this.TableList()
                    })
                }
            },
            showPicModel(row) {
                this.thisBizId = row.id
                this.$yAxios({
                    url: meetApi.queryAlbumPage,
                    data: {bizId: row.id},
                    loading: true
                }, info => {
                    this.picgroupInfo.show = true
                    this.picgroupInfo.picList = info.list
                })

            },
            updateModelAlbum({type, file}) {
                switch (type) {
                    case 'delete': {
                        this.pageInfo.formData.thumbUrl = '';
                        this.$yAxios({
                            url: meetApi.removeAlbum,
                            data: {
                                "ids": [file.id]
                            },
                            loading: true
                        }, info => {
                        })
                        this.$forceUpdate()
                        break;
                    }
                    case 'edit':
                    case 'add': {
                        // this.forms.formModel.attachmentId = file.id;
                        this.pageInfo.formData.thumbUrl = file.name;
                        this.$yAxios({
                            url: meetApi.saveAlbum,
                            data: {
                                "bizId": this.thisBizId,
                                "imgUrl": file.name,
                            },
                            loading: true
                        }, info => {
                        })
                        break;
                    }
                }
            },
            updateModel({type, file}) {
                switch (type) {
                    case 'delete': {
                        // this.forms.formModel.attachmentId = '';
                        // that.pageInfo.formData
                        this.pageInfo.formData.thumbUrl = '';
                        this.$forceUpdate()
                        break;
                    }
                    case 'edit':
                    case 'add': {
                        // this.forms.formModel.attachmentId = file.id;
                        this.pageInfo.formData.thumbUrl = file.name;
                        // this.$refs['yForm'].$refs['form'].validateField('picUrl');
                        break;
                    }
                }
            },
            handleRemove(file, fileList) {
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url
                this.dialogVisible = true
            },
            TableEdit(row) {
                this.thisBizId = row.id
                this.$yAxios({
                    url: meetApi.queryRoomDetail,
                    data: {id: row.id},
                    loading: true
                }, info => {
                    console.log(info,22221111)
                    this.pageInfo.show = true
                    info.configTag = info.configTag.split(',')
                    this.pageInfo.formData = info
                    console.log(this.pageInfo.formData,2222)
                    this.changeStore()
                })

            },
            // 删除
            TableDel(data) {
                this.$confirm('你确定要删除此条数据吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$yAxios({
                        url: meetApi.removeRoom,
                        data: {ids: [data.id]},
                        loading: true
                    }, info => {
                        this.TableList()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            // // 详情
            // viewDetail() {
            //   this.pageInfo.show = true
            // },
            TableList() {
                this.$yAxios({
                    url: meetApi.queryRoom,
                    data: this.searchForm,
                }, info => {
                    this.pageInfo.list = info.list
                })
            },
            Submit() {
                let params = JSON.parse(JSON.stringify(this.pageInfo.formData))
                this.pageInfo.formData.configTag = params.configTag.join(',')
                this.$yAxios({
                    url: meetApi.saveRoom,
                    data: this.pageInfo.formData,
                    loading: true
                }, info => {
                    this.TableList()
                    this.$refs.formDatas.resetFields()
                    this.pageInfo.show = false
                })
            },
            // 点击查询按钮
            SearchSubmit() {
                this.searchLoading = true
                this.searchForm.pageNum = 1
                this.TableList()
            },
            // 点击重置按钮
            SearchReset(name) {
                this.$refs[name].resetFields()
                this.searchForm.pageNum = 1
                this.TableList()
            },
            // 点击新增按钮
            CreateForm() {

                this.pageInfo.formData = {
                    address: "",
                    capNum: null,
                    configTag: [],
                    dayEndTime: "",
                    dayStartTime: "",
                    delFlag: "",
                    descript: "",
                    endDate: "",
                    phoneNum: "13161967869",
                    price: "",
                    roomCategory: "",
                    roomName: "",
                    roomType: 1,
                    shopId: "",
                    startDate: "",
                    thumbUrl: "",
                    zbJd: "",
                    zbWd: ""
                }
                this.pageInfo.show = true
            },
            // 分页数据回调
            CurrentChange(e) {
                // this.searchForm.pageSize = e.size
                this.searchForm.page = e
                this.TableList()
            },
            // 点击表单取消
            Cancel(name) {
                // this.$refs[name].resetFields()
                this.$refs.formDatas.resetFields()

                this.pageInfo.show = false
            },
            queryDictList() {
                this.$yAxios({
                    url: meetApi.queryByPcode,
                    data: {
                        "pcode": 'XBGKJ'
                    },
                    loading: true
                }, info => {
                    this.DictList = info
                })
            },
            queryDictTypeList() {
                this.$yAxios({
                    url: meetApi.queryByPcode,
                    data: {
                        "pcode": 'DGNBGKJLB'
                    },
                    loading: true
                }, info => {
                    this.DictTypeList = info
                })
            },
            closePicModel() {
                this.picgroupInfo.show = false
            },
            queryStoreList() {
                this.$yAxios({
                    url: meetApi.storeAllList,
                    data: {},
                    loading: true
                }, info => {
                    this.storeList = info
                })
            },
        }
    }
</script>

<style lang="less" scoped>
    .curriculum-resources-container {
        padding: 20px;

        ::v-deep.curriculum-wrap .el-form-item__content {
            display: flex;
            justify-content: flex-start;

            // justify-content: space-between;
            // & > div{
            //   flex: 1;
            // }
            .cover {
                width: 150px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }

            .video {
                width: 150px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
        }
    }
</style>
